<!DOCTYPE html>
<html lang="en">
<head>
  <title>表单及按钮的美化</title>
  <script type="text/javascript" src="../../vendor/jquery1.3.2.js"></script>
  <script type="text/javascript">
    ;(function($){
      $.fn.hcheckbox=function(options){
        $(':checkbox+label',this).each(function(){
          $(this).addClass('checkbox');
          if($(this).prev().is(':disabled')==false){
            if($(this).prev().is(':checked'))
              $(this).addClass("checked");
          }else{
            $(this).addClass('disabled');
          }
        }).click(function(event){
                  if(!$(this).prev().is(':checked')){
                    $(this).addClass("checked");
                    $(this).prev()[0].checked = true;
                  }
                  else{
                    $(this).removeClass('checked');
                    $(this).prev()[0].checked = false;
                  }
                  event.stopPropagation();
                }
        ).prev().hide();
      }

      $.fn.hradio = function(options){
        var self = this;
        return $(':radio+label',this).each(function(){
          $(this).addClass('hRadio');
          if($(this).prev().is("checked"))
            $(this).addClass('hRadio_Checked');
        }).click(function(event){
          $(this).siblings().removeClass("hRadio_Checked");
          if(!$(this).prev().is(':checked')){
            $(this).addClass("hRadio_Checked");
            $(this).prev()[0].checked = true;
          }

          event.stopPropagation();
        })
                .prev().hide();
      }
    })(jQuery)
  </script>
  <style>
    label.checkbox {padding-left: 24px; cursor:pointer;background: url(./jscss/demoimg/201105/checkbox.png) no-repeat left -21px; line-height:22px; height:21px; display:inline-block; }
    label.checked {background-position:left 100%;  }
    label.disabled{background-position:left 0px;}
    .hRadio
    {
      padding-left: 22px; display: inline-block;
      background: transparent url(./jscss/demoimg/201105/radio.png) no-repeat left top;
      height: 19px; line-height:20px;
      cursor:pointer;vertical-align:middle;
    }
    .hRadio_Checked { background-position: left bottom;}
  </style>
  <script type="text/javascript">
    $(function(){
      $('#chklist').hcheckbox();
      $('#radiolist').hradio();
      $('#btnOK').click(function(){
        var checkedValues = new Array();
        $('#chklist :checkbox').each(function(){
          if($(this).is(':checked'))
          {
            checkedValues.push($(this).val());
          }
        });

        alert(checkedValues.join(','));
        alert($('#radiolist :checked').val());
      })
    });
  </script>
</head>

<body>
<div id="chklist" style="padding:10px; font-size:14px; ">
  <input type="checkbox" value='1' /><label>aaaaaa</label>
  <input type="checkbox" value='2' /><label>bbbbbb</label>
  <input type="checkbox" value='3' /><label>ccccc</label>
  <input type="checkbox" value='4' /><label>ddddd</label>
</div>

<div id="radiolist" style="padding:10px; font-size:14px; ">
  <input name='r' type="radio" value='11' /><label>AAAAAA</label>
  <input name='r' type="radio" value='21' /><label>BBBBBBBB</label>
  <input name='r' type="radio" value='31' /><label>CCCCCC</label>
  <input name='r' type="radio" value='41' /><label>DDDDDD</label>
</div>
<input type="button" value="确定" id="btnOK" />
</body>
</html>